<template>
  <div>图表</div>
  <div ref="div_echarts" class="echarts"></div>

  <div>
    {{ value2 }}
    <el-date-picker v-model="value2" type="month" value-format="YYYY/MM" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { log } from '../../ts/logger'
import { Tools } from '../../ts/Tools'
const value2 = ref(Tools.formatDate(new Date(), 'yyyy/MM'))
const div_echarts = ref(null)
const chart = ref(null)
const options = ref({
  legend: {
    data: ['aaaa', 'bbbb'],
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: [
    {
      data: ['A', 'B', 'C', 'D', 'E'],
    },
  ],
  yAxis: { type: 'value' },
  series: [
    {
      name: 'aaaa',
      data: [10, 22, 28, 43, 49],
      type: 'line',
    },
    {
      name: 'bbbb',
      data: [14, 32, 18, 53, 19],
      type: 'line',
    },
  ],
})

const initEcharts = () => {
  chart.value.setOption(options.value)
}

onMounted(() => {
  log.debug('页面元素：', div_echarts.value)
  chart.value = echarts.init(div_echarts.value)
  initEcharts()
})
</script>

<style lang="scss" scoped>
.echarts {
  width: 64vw;
  height: 36vw;
}
</style>
